<template>
    <div class="fillContain">
        <div class="table_container" style="padding-top: 20px">
            <el-form :inline="true" size="mini"  ref="reportForm" style="width:220px;">
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="addChildNode()">添加子节点</el-button>&nbsp;
                <el-dropdown trigger="click">
                    <el-button size="mini" plain>
                        更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :divided="true" >
                            <el-button size="mini" icon="el-icon-refresh"  @click="loadTreeList(1)" plain style="width: 120px">
                                刷新
                            </el-button>
                        </el-dropdown-item>
                        <el-dropdown-item :divided="true" >
                            <el-button size="mini" icon="el-icon-edit"  @click="updateChildNode()" plain style="width: 120px">
                                修改
                            </el-button>
                        </el-dropdown-item>
                        <el-dropdown-item :divided="true" >
                            <el-button size="mini" icon="el-icon-delete"  @click="batchDel()" plain style="width: 120px">
                                批量删除
                            </el-button>
                        </el-dropdown-item>
                        <el-dropdown-item :divided="true" >
                            <el-button size="mini" icon="el-icon-plus" @click="addFirstNode()" plain style="width: 120px">
                                添加一级节点
                            </el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <br>
                <el-input
                        size="mini"
                        style="width: 215px"
                        placeholder="输入关键字进行过滤"
                        v-model="filterText"
                        clearable>
                </el-input>
            </el-form>
            <div class="tree" style="height: 500px">
                <el-tree
                        class="el-tree"
                        style="width: 500px;"
                        @current-change="updateCommom()"
                        :data="treeList"
                        show-checkbox
                        node-key="id"
                        ref="tree2"
                        highlight-current
                        :filter-node-method="filterNode"
                        :props="defaultProps">
                </el-tree>
            </div>
        </div>

        <!--添加子节点窗口-->
        <el-dialog
                :title="addChildNodePops.title"
                :visible.sync="addChildNodePops.centerDialogVisible"
                width="30%">
            <el-form :model="addChildNodePops.ruleForm"
                     ref="ruleForm"
                     size="mini"
                     label-width="150px"
                     label-position="right"
                     :rules="addChildNodePops.rules">
                <el-form-item label="父节点名称：" :hidden="addChildNodePops.ruleForm.parentInputHidden">
                    <el-input
                            v-model="addChildNodePops.ruleForm.parentNodeName"
                            style="width: 200px"
                            disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="报表类型名称：" prop="reportTypeName">
                    <el-input
                            placeholder="请输入报表类型名称"
                            v-model="addChildNodePops.ruleForm.reportTypeName"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="seq">
                    <el-input
                            placeholder="请输入排序"
                            v-model.number="addChildNodePops.ruleForm.seq"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addChildNodeOk()">确 定</el-button>
                <el-button @click="addChildNodePops.centerDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <!--修改窗口-->
        <el-dialog
                :title="updateNodePops.title"
                :visible.sync="updateNodePops.centerDialogVisible"
                width="30%">
            <el-form :model="updateNodePops.ruleForm"
                     ref="ruleForm2"
                     size="mini"
                     label-width="150px"
                     label-position="right"
                     :rules="updateNodePops.rules">
                <el-form-item label="父节点名称：" :hidden="updateNodePops.ruleForm.parentInputHidden">
                    <el-input
                            v-model="updateNodePops.ruleForm.parentNodeName"
                            style="width: 200px"
                            disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="报表类型名称：" prop="reportTypeName">
                    <el-input
                            placeholder="请输入报表类型名称"
                            v-model="updateNodePops.ruleForm.reportTypeName"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="seq">
                    <el-input
                            placeholder="请输入排序"
                            v-model.number="updateNodePops.ruleForm.seq"
                            style="width: 200px"
                            clearable>
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateChildNodeOk()">确 定</el-button>
                <el-button @click="updateNodePops.centerDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import {getTreeList,addTreeNode,delTreeNode,updateTreeNode} from '@/api/getData'
    var report_id = '';
    export default {
        created:async function () {
            this.loadTreeList(0);
        },
        watch: {
            filterText(val) {
                this.$refs.tree2.filter(val);
            }
        },
        data() {
            return {
                filterText:'',
                treeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //添加子节点弹窗属性
                addChildNodePops: {
                    centerDialogVisible: false,
                    title: '',
                    ruleForm:{
                        id: '',
                        parentNodeName: '',
                        //报表类型名称
                        reportTypeName:'',
                        seq: '',
                        parentInputHidden: false
                    },
                    rules:{
                        reportTypeName:[
                            { required: true, message: '请输入报表类型名称', trigger: 'blur' }
                        ],
                        seq:[
                            { required: true, message: '请输入排序', trigger: 'blur' },
                            { type: 'number', message: '排序必须为数字'}
                        ]
                    }
                },
                //修改弹窗对象
                updateNodePops: {
                    centerDialogVisible: false,
                    title: '',
                    ruleForm:{
                        id: '',
                        parentNodeName: '',
                        //报表类型名称
                        reportTypeName:'',
                        seq: '',
                        parentInputHidden: false
                    },
                    rules:{
                        reportTypeName:[
                            { required: true, message: '请输入报表类型名称', trigger: 'blur' }
                        ],
                        seq:[
                            { required: true, message: '请输入排序', trigger: 'blur' },
                            { type: 'number', message: '排序必须为数字'}
                        ]
                    }
                }
            };
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            async loadTreeList(type){
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if (type == null || type == "" || type == undefined) {
                    type = 0;
                }
                let reply = await getTreeList(type);
                loading.close();
                if (reply.code == 500) {
                    this.$notify.error({
                        title: '错误',
                        message: reply.msg
                    });
                } else {
                    this.treeList = reply.data;
                }
            },
            //修改节点
            updateChildNode() {
                var node = this.$refs.tree2.getCurrentNode();
                if (node == null || node == undefined) {
                    this.$message.error("请选择一个节点后修改！");
                    return;
                }
                this.updateNodePops.title = "修改";
                this.updateNodePops.ruleForm.parentInputHidden = true;
                this.updateNodePops.ruleForm.id = node.id;
                this.updateNodePops.ruleForm.parentNodeName = '';
                this.updateNodePops.ruleForm.reportTypeName = node.label;
                this.updateNodePops.ruleForm.seq = node.sequence;
                //console.log(this.updateNodePops.ruleForm);
                //显示弹窗
                this.updateNodePops.centerDialogVisible = true;
            },
            updateChildNodeOk() {
                this.$refs['ruleForm2'].validate(async (valid) => {
                    if (valid) {
                        var params = {
                            //新增的话为父类id，修改为当前的节点id
                            parentId : this.updateNodePops.ruleForm.id,
                            name : this.updateNodePops.ruleForm.reportTypeName,
                            seq : this.updateNodePops.ruleForm.seq
                        }
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let reply = await updateTreeNode(params);
                        loading.close();
                        if (reply.code == 500) {
                            this.$notify.error({
                                title: '错误',
                                message: reply.msg
                            });
                        } else {
                            this.$notify.success({
                                message: '操作成功'
                            });
                        }
                        this.updateNodePops.centerDialogVisible = false;
                        this.loadTreeList(0);
                    }else {
                        return false;
                    }
                });
            },
            //点击添加子节点
            addChildNode() {
                //获取当前选择节点
                var node = this.$refs.tree2.getCurrentNode();
                if (node == null || node == undefined) {
                    this.$message.error("请选择一个节点后添加！");
                    return;
                }
                this.addChildNodePops.title = "添加子节点";
                this.addChildNodePops.ruleForm.parentInputHidden = false;
                this.addChildNodePops.ruleForm.id = node.id;
                this.addChildNodePops.ruleForm.parentNodeName = node.label;
                this.addChildNodePops.ruleForm.reportTypeName = '';
                this.addChildNodePops.ruleForm.seq = '';
                //显示弹窗
                this.addChildNodePops.centerDialogVisible = true;
                //重置校验
                if (this.$refs['ruleForm'] != undefined) {
                    this.$refs['ruleForm'].resetFields();
                }
            },
            //添加子节点确定
            addChildNodeOk() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (valid) {
                        var params = {
                            //新增的话为父类id，修改为当前的节点id
                            parentId : this.addChildNodePops.ruleForm.id,
                            name : this.addChildNodePops.ruleForm.reportTypeName,
                            seq : this.addChildNodePops.ruleForm.seq
                        }
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let reply = await addTreeNode(params);
                        loading.close();
                        if (reply.code == 500) {
                            this.$notify.error({
                                title: '错误',
                                message: reply.msg
                            });
                        } else {
                            this.$notify.success({
                                message: '操作成功'
                            });
                        }
                        this.addChildNodePops.centerDialogVisible = false;
                        this.loadTreeList(0);
                    }else {
                        return false;
                    }
                });
            },
            //添加一级菜单
            addFirstNode() {
                this.addChildNodePops.title = "添加一级节点";
                this.addChildNodePops.ruleForm.parentInputHidden = true;
                this.addChildNodePops.ruleForm.id = 0;
                this.addChildNodePops.ruleForm.parentNodeName = '';
                this.addChildNodePops.ruleForm.reportTypeName = '';
                this.addChildNodePops.ruleForm.seq = '';
                //显示弹窗
                this.addChildNodePops.centerDialogVisible = true;
                //重置校验
                if (this.$refs['ruleForm'] != undefined) {
                    this.$refs['ruleForm'].resetFields();
                }
            },
            //批量删除
            async batchDel() {
                var checkedNodes = this.$refs.tree2.getCheckedNodes();
                if (checkedNodes.length < 1) {
                    this.$message.error("请勾选节点后删除！");
                    return;
                }
                var ids = new Array();
                for (var i = 0 ; i < checkedNodes.length; i ++) {
                    if(checkedNodes[i].children.length > 1) {
                        this.$message.error("【" + checkedNodes[i].label + "】下有多个子节点无法被删除！");
                        return;
                    } else if (checkedNodes[i].children.length == 1) {
                        continue;
                    }
                    ids.push(checkedNodes[i].id);
                }

                this.$msgbox({
                    title: '提示',
                    message:"此操作将删除选择的数据, 是否继续?",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                            const loading = this.$loading({
                                lock: true,
                                text: '加载中...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            let reply = await delTreeNode(ids);
                            loading.close();
                            if (reply.code == 500) {
                                this.$notify.error({
                                    title: '错误',
                                    message: reply.msg
                                });
                            } else {
                                this.$notify.success({
                                    message: '操作成功'
                                });
                            }
                            this.loadTreeList(0);
                        }
                        done();
                    }
                }).then(action => {});
            },
            //调用父组件方法
            updateCommom() {
                this.$emit('refresh', this.$refs.tree2.getCurrentNode().id);
            }
        }
    }
</script>

<style scoped>
    .tree{
        overflow:auto;
        height: 420px;
        width:220px;
    }
    .el-tree{
        width: 100%;
    }
    .el-tree>.el-tree-node{
        display: inline-block !important;
    }
</style>